<template>
        <el-form 
            :model="form"
            status-icon
            :rules="rules"
            ref="form"
            class="loginContainer"
        >
            <h3 class="loginTitle">逛逛登录</h3>
            <el-form-item
                label="用户名"
                label-width="80px"
                prop="username"
            >
                <el-input
                    type="input"
                    v-model="form.username"
                    autocomplete="off"
                    placeholder="请输入账号"
                >
                </el-input>
            </el-form-item>

            <el-form-item
                label="密码"
                label-width="80px"
                prop="password"
            >
                <el-input
                    type="password"
                    v-model="form.password"
                    autocomplete="off"
                    placeholder="请输入密码"
                >
                </el-input>
                
            </el-form-item>
            <el-form-item class="loginSubmit">
                <!-- <el-button @click="register" class="loginSubmit" style="margin-right:15px;">注册</el-button> -->
                <el-button type="primary" @click="login" style="margin-left:15px;width:320px" class="loginSubmit">登录</el-button>
            </el-form-item>
            <router-link to="/register">
                <el-link class="email">注册</el-link>
            </router-link>
                <span class="email">/</span>
            <router-link to="/emailLogin">
                <el-link class="email">邮箱登录</el-link>
            </router-link>
            <router-link to="/findPassword" style="float:right">
                <el-link class="email">找回密码</el-link>
            </router-link>
        </el-form>
</template>

<script>
// import cookie from '../cookie/index'
import store from '../store/index'
import jwtDecode from 'jwt-decode' //解析token
export default({
    name:'login',
    data() {
        return {
            form:{
                username:'',
                password:''
            },
            rules:{
                username:[
                    { required:true, message:"请输入用户名",trigger:"blur" },
                    {
                        min:6,
                        max:18,
                        message:'用户名应6~18位的字母或数字',
                        trigger:"blur"
                    }
                ],
                password:[
                    { required:true, message:"请输入密码",trigger:"blur" }
                ]
            }
        }
    },
    methods: {
        
        login(){
            console.log(this.form);
            console.log(this.form.username);
            console.log(this.form.password);
            if( this.form.username === '' || this.form.password === ''){
                this.$message({
                            message:'请完整填写用户名与密码',
                            type:'warning',
                            center:true
                        })
            }else{
                this.$http({
                    url:'/shops/login_and_register/basic/login',
                    method:'POST',
                    params:{
                        userAccount:this.form.username,
                        userPassword:this.form.password
                    },
                    // headers:{
                    //     'Authorization':cookie.getToken()
                    // }
                }).then(data => {
                    console.log(data);
                    console.log(data.data.code);
                    const value =  jwtDecode(data.data.data);
                    if( data.data.code === 199 ){
                        // alert('用户名或密码错误')
                        this.$message({
                            message:'用户名或密码错误',
                            type:'warning',
                            center:true
                        })
                    }else{
                        // cookie.setToken(data.data.data)
                        
                        this.$store.commit("setToken",data.data.data)
                        console.log(value);
                        this.$message({
                            message:'登录成功',
                            type:'success',
                            center:true
                        })
                        if(value.permission === 'ADMIN'){
                            console.log(1111111111111);
                            this.$router.push({ name: 'home' })
                        }else{
                            this.$router.push({ name: 'main' })
                        }
                    }
                }).catch(err => {
                    console.log(err);
                })
            }
            
        },
        
    },
    mounted() {
        
    },
})
</script>

<style scoped>
.loginContainer{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background-color: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
.loginTitle{
    margin: 0px auto 30px auto;
    text-align: center;
    color: #505458;
}
.loginSubmit{
    margin: 10px auto 0px auto;
    /* margin: 0 auto; */
    /* margin: 0; */
    text-align: center;
}
.email{
    font-size: 12px;
}
</style>